<template>
  <div>
    root/title:{{$store.state.title}}
    <hr>
    a/title:{{$store.state.a.title}}
    <hr>
    a/a1/title:{{$store.state.a.a1.title}}

    <hr>
    getters: root/g1 {{$store.getters.g1}}
    <hr>
    getters: root/a/ga1 {{$store.getters['a/ga1']}}
    <hr>
    getters: root/a/a1/ga3 {{$store.getters['a/a1/ga3']}}

    <hr>

    <button @click="$store.commit('a/SET_TITLE','hahaha')">a/SET_TITLE:{{$store.state.a.title}}</button>
    <button @click="$store.commit('a/a1/SET_TITLE','lalala')">a/a1/SET_TITLE:{{$store.state.a.a1.title}}</button>
    <hr>
    <button @click="$store.dispatch('a/add',{a:100,b:200})">a/add</button>
    <button @click="$store.dispatch('a/a1/add',{a:300,b:200})">a/a/a1/add</button>

  </div>
</template>
<script>
import { SET_COUNT, SAY, ADD } from "@/mutations.js";

export default {
  computed:{
    fullName(){
      return this.$store.getters.fullName
    },
    title:{
      get(){
        return this.$store.state.title
      },
      set(value){
        this.$store.state.title = value;
      }
    },
    routes(){
      return this.$router.options.routes.filter(el=>el.meta.hidden===false)
    }
  },
  methods:{
    SET_COUNT(num){
      this.$store.commit(SET_COUNT,num)
    },
    add(num){
      this.$store.dispatch('add',num).then((data)=>{
        
        console.log('then',data);
      }).catch(()=>{
        console.log('error');
      })
 
    }
  },

  mounted(){
    // console.log(this.$store);
    // console.log(this.$store.state.title);
  }

}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>